<template>
  <div :class="{'weui_loading_toast': type === 'loading'}">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
      <div class="weui_loading" v-if="type === 'loading'">
        <div v-for="n in 12" class="weui_loading_leaf" :class="'weui_loading_leaf_' + n"></div>
      </div>
      <div v-else class="toast-animation">
        <span></span>
        <i class="weui_icon_toast"></i>
      </div>
      <div class="weui_toast_content"><slot></slot></div>
    </div>
  </div>
</template>

<style>
@keyframes toast-w
{
  from {width:100%;}
  to {width:0;}
}
  .toast-animation{position: relative}
  .toast-animation span{position: absolute;height: 100%;animation: toast-w 1s ease-in 1;background: rgba(90, 90, 90, 1);right: 0;}
  .weui_loading_toast,.weui_toast{line-height: 1.6;font-size: 16px;}
</style>

<script>
export default {
  props: {
    /**
     * toast类型
     * icon: 包含图标的提示框（默认）
     * loading: 包含loading动画的提示框
     */
    type: {
      type: String,
      required: false,
      default: 'icon'
    }
  }
}
</script>
